<template>
  <div class="beam-layout-container">
    <!-- 顶部查询条件 -->
    <div class="screen-conditions-container">
      <ScreenConditions :isDataType="false">
        <template slot="conditions">
          <SelectBlock
            :allowClear="true"
            v-model="conditions.orgCode"
            @change="blockChange($event)"
          ></SelectBlock>
          <bjRangeCalendar
            format="YYYY-MM-DD HH:mm:ss"
            valueFormat="YYYY-MM-DD HH:mm:ss"
            :show-time="{ format: 'HH:mm:ss' }"
            @ok="calendarOk"
            @change="calendarChange"
          ></bjRangeCalendar>
        </template>
        <template slot="operate">
          <a-button type="primary" @click="search()"> 查询 </a-button>
        </template>
      </ScreenConditions>
    </div>
    <div class="beam-table-container">
      <div class="table-header" header="安全抓拍"></div>
      <div class="main" v-loading="loading">
        <vxe-table
          ref="xTable"
          height="99%"
          class="scrollbarStyle"
          align="center"
          show-overflow
          show-header-overflow
          :data="tableData"
          :column-config="{ resizable: true }"
        >
          <vxe-column type="seq" width="80" title="序号"></vxe-column>
          <vxe-column
            show-overflow
            :key="index"
            :title="item.title"
            :field="item.key"
            :width="item.width"
            v-for="(item, index) in columns"
          >
            <template #default="{ row }">
              <div v-if="item.key == 'approvlStatus'">
                <div :class="[checkStatusClass(row), 'status-text']">
                  {{ checkStatusName(row) }}
                </div>
              </div>
              <div v-else>{{ row[item.key] }}</div>
            </template>
          </vxe-column>
          <vxe-column
            field="operate"
            width="220"
            title="操作"
            fixed="right"
            align="left"
          >
            <template #default="{ row }">
              <div class="text-button-group">
                <a-button
                  type="link"
                  v-if="row.distribution"
                  @click="gotoDistribute(row)"
                >
                  分配
                </a-button>
                <a-button
                  type="link"
                  v-if="row.handle"
                  @click="gotoView(row, 0)"
                >
                  处理
                </a-button>
                <a-button
                  type="link"
                  v-if="row.approve"
                  @click="gotoView(row, 1)"
                >
                  审批
                </a-button>
                <a-button type="link" @click="gotoView(row, 2)">
                  查看
                </a-button>
                <a-button type="link" @click="snapImg(row)">
                  抓拍图片
                </a-button>
              </div>
            </template>
          </vxe-column>
        </vxe-table>
      </div>
      <div class="pager-container">
        <vxe-pager
          background
          :current-page.sync="pager.page"
          :page-size.sync="pager.pageSize"
          :total="pager.total"
          :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'Sizes', 'FullJump']"
          @page-change="paginationChange"
        >
          <template #left>
            <div class="vxe-pager-left-tip-container">
              第<span>1</span>到<span
                >{{ Math.ceil(pager.total / pager.pageSize) || 1 }}页 </span
              >共<span>{{ pager.total }}</span
              >条记录
            </div>
          </template>
        </vxe-pager>
      </div>
    </div>
    <!-- 详情页面 -->
    <customModal :visible.sync="pageVisible" :parameter="parameter">
    </customModal>
    <!-- 分配弹窗 -->
    <distributeModal
      :visible.sync="distributeVisible"
      :parameter="parameter"
    ></distributeModal>
    <!-- 抓怕图片 -->
    <snapPictureModal
      :visible.sync="pictureVisible"
      :previewImgs="path"
    ></snapPictureModal>
  </div>
</template>

<script>
import bjRangeCalendar from "@/components/bj-range-calendar";
import SelectBlock from "@/components/wisdom-beam/SelectBlock";
import customModal from "./components/customModal";
import distributeModal from "./components/distributeModal";
import snapPictureModal from "./components/snapPictureModal";
import { getSnapList } from "@/api/wisdom-beam/security-app.js";
export default {
  components: {
    SelectBlock,
    bjRangeCalendar,
    customModal,
    distributeModal,
    snapPictureModal,
  },
  data() {
    return {
      conditions: {
        //标段
        orgCode: undefined,
      },
      defaultTime: [],
      loading: false,
      columns: [
        {
          title: "抓拍类型",
          key: "snapType",
        },
        {
          title: "抓拍时间",
          key: "snapTime",
        },
        {
          title: "审批人",
          key: "approver",
        },
        {
          title: "状态",
          key: "approvlStatus",
        },
      ],
      tableData: [],
      pager: {
        page: 1,
        pageSize: 10,
        total: 0,
      },
      //查看
      pageVisible: false,
      //分配
      distributeVisible: false,
      //抓怕图片
      pictureVisible: false,
      parameter: {},
      path: [],
    };
  },
  mounted() {},
  methods: {
    //监听标段切换
    blockChange() {
      this.search();
    },
    //抓拍图片
    snapImg(row) {
      let { picture } = row;
      this.path = [picture];
      this.pictureVisible = true;
    },
    gotoDistribute(row) {
      this.parameter = row;
      this.distributeVisible = true;
    },
    gotoView(row, operate) {
      this.parameter = {
        ...row,
        operate,
      };
      this.pageVisible = true;
    },
    //查询分页数据
    getTableData() {
      this.loading = true;
      let { page, pageSize } = this.pager;
      let { defaultTime } = this;
      let { orgCode } = this.conditions;
      getSnapList({
        page,
        pageSize,
        zhgdDeptCode: orgCode?.key || "",
        startTime: defaultTime[0],
        endTime: defaultTime[1],
      })
        .then((res) => {
          this.tableData = res.data.result.rows;
          this.pager.total = res.data.result.total;
        })
        .catch((_) => {})
        .finally((_) => {
          this.loading = false;
        });
    },
    search() {
      this.pager.page = 1;
      this.getTableData();
    },
    calendarOk(dates = []) {
      this.defaultTime = dates;
      this.search();
    },
    calendarChange(dates = []) {
      this.defaultTime = dates;
      if (this.defaultTime.length == 0) {
        this.search();
      }
    },
    //监听分页切换
    paginationChange({ currentPage, pageSize }) {
      this.pager.page = currentPage;
      this.pager.pageSize = pageSize;
      this.getTableData();
    },

    //校验状态名称
    checkStatusName(row) {
      let { testNode, approvlStatus } = row;
      switch (testNode) {
        case "1":
          if (approvlStatus == 0) {
            return "待分配";
          } else {
            return "-";
          }

        case "2":
          if (approvlStatus == 0) {
            return "处理中";
          } else {
            return "-";
          }

        case "3":
          if (approvlStatus == 1) {
            return "审批中";
          } else {
            return "-";
          }

        case "4":
          if (approvlStatus == 2) {
            return "已完成";
          } else if (approvlStatus == 3) {
            return "驳回";
          } else {
            return "-";
          }

        default:
          return "--";
      }
    },

    //校验状态className
    checkStatusClass(row) {
      let { testNode, approvlStatus } = row;
      switch (testNode) {
        case "1":
          if (approvlStatus == 0) {
            return "lock";
          } else {
            return "cancel";
          }

        case "2":
          if (approvlStatus == 0) {
            return "warn";
          } else {
            return "cancel";
          }

        case "3":
          if (approvlStatus == 1) {
            return "approv";
          } else {
            return "cancel";
          }

        case "4":
          if (approvlStatus == 2) {
            return "normal";
          } else if (approvlStatus == 3) {
            return "error";
          } else {
            return "cancel";
          }

        default:
          return "cancel";
      }
    },
  },
};
</script>

<style lang="less" scoped>
.table-header {
  padding: 28px 20px !important;
}
.status-text {
  border-radius: 4px;
  color: #fff;
  .flex();
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  font-size: 12px;
  width: 80px;
  &.lock {
    background: #0098ff;
  }
  &.warn {
    background: #ff993f;
  }
  &.approv {
    background: #ff7113;
  }
  &.normal {
    background: #4bc964;
  }
  &.error {
    background: #ff3f4a;
  }
  &.cancel {
    background: #f1f2f7;
    color: #aab0bc;
  }
}
</style>
